<template>
  <div>
    <div v-show="wip.wip_id" v-loading="pageLoading">
      <el-form inline>
        <el-form-item label="包装序号">
          <el-input v-model="wip.serial_number" disabled></el-input>
        </el-form-item>
        <el-form-item label="产品数量">
          <el-input style="width: 120px;" v-model="wip.batch_qty" disabled></el-input>
        </el-form-item>
        <el-form-item label="工单号">
          <el-input v-model="wip.mo_no" disabled></el-input>
        </el-form-item>
        <el-form-item label="产品编号">
          <el-input v-model="wip.key_part_no" disabled></el-input>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="wip.key_part_name" disabled></el-input>
        </el-form-item>
      </el-form>
      <el-tree v-if="treeFlag" :props="props" accordion :load="loadChildren" lazy>
        <span class="t-14" slot-scope="{ data }">
          <span>序号：</span>
          <span class="text-label bg-blue">{{ data.sn }}</span>
          <span class="ml-20">产品总数：</span>
          <span class="text-label bg-green">{{ data.batch_qty }}</span>
        </span>
      </el-tree>
    </div>
    <el-empty v-show="!wip.wip_id"></el-empty>
  </div>
</template>
<script>
// 包装明细 树
export default {
  props: {
    rootSn: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      props: {
        children: 'children',
        isLeaf: function (data) {
          return data.package_level == 0
        },
      },
      treeData: [],
      wip: {},
      pageLoading: false,
      treeFlag: false,
    }
  },
  computed: {},
  watch: {
    rootSn: function (v) {
      this.treeFlag = false
      setTimeout((v) => {
        this.treeFlag = true
      }, 100)
    },
  },
  methods: {
    loadChildren(node, resolve) {
      if (node.level == 0) {
        if (!this.rootSn) resolve([])
        this.wip = {}
        this.$request(this.$api.unPack + 'getsninfo', { sn: this.rootSn })
          .then((r) => {
            this.wip = r.wip
            let treeData = [
              {
                sn: this.wip.serial_number,
                batch_qty: this.wip.batch_qty,
                package_level: this.wip.package_level,
              },
            ]
            resolve(treeData)
          })
          .finally(() => {
            this.pageLoading = false
          })
      }
      if (node.level > 0) {
        if (!node.data.sn) resolve([])
        this.$request(this.$api.unPack + 'getchildrenpack', {
          packageLevel: node.data.package_level,
          sn: node.data.sn,
        }).then((r) => {
          resolve(r || [])
        })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
</style>